<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478F2' }"
				back-text="返回首页"
				:back-text-style="{ color: '#ffffff' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="提交成功"
				title-color="#fff"
				title-size="40"
				title-bold
				:customBack="handleNavBack"
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="page">
				<view class="top">
					<view class="circle">
						<image src="/static/icon/gou.png" mode="scaleToFill" class="gou" />
					</view>
					<view class="content">
						<view class="title">您好，您的资料已经提交成功!</view>
						<view>
							由于当前申请人数过多，预估
							<span>3</span>
							个工作日
						</view>
						<view>内有审核结果，请密切关注平台信息</view>
						<view>以免错过审核通知。</view>
					</view>
				</view>
				<view class="tip">
					<text>您还可以申请以下产品</text>
					<image src="/static/icon/shou.png" mode="scaleToFill" class="hand" />
				</view>
				<view class="bottom">
					<view class="first_line"></view>

					<product :obj="row" />
				</view>
				<view class="btn headle" @click="more">查看更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mixin } from '@/utils/mixins'
import Product from './components/product.vue'
import ajax from '@/api'
export default {
	mixins: [mixin],
	components: { Product },
	data() {
		return {
			row: []
		}
	},
	computed: {},
	watch: {},
	onLoad() {},
	onShow() {
		this.init()
	},
	onReady() {},
	// 方法集合
	methods: {
		async init() {
			try {
				const result = await ajax.getCommend()
				this.row = result.row
			} catch (error) {
				console.log(error)
			}
		},
		more() {
			uni.switchTab({
				url: '/pages/loans/index'
			})
		},
		detail() {
			uni.navigateTo({
				url: '/pages/loans/detail'
			})
		},
		handleNavBack() {
			uni.switchTab({
				url: '/pages/home/index'
			})
		}
	},
	onHide() {},
	onUnload() {}
}
</script>

<style lang="scss" scoped>
.header {
	color: #fff;
}
.page {
	height: 100%;
	background-color: #fff;
}
.top {
	width: 100%;
	padding: 80rpx 54rpx 0rpx 56rpx;
}
.circle {
	width: 200rpx;
	height: 200rpx;
	margin: 0 auto;
	border: 32rpx solid #f3f8ff;
	border-radius: 50%;
	background: #3478f2;
	position: relative;
	.gou {
		position: absolute;
		height: 44rpx;
		width: 62rpx;
		top: 48rpx;
		left: 40rpx;
		z-index: 3;
	}
}
.content {
	margin-top: 58rpx;
	font-family: PingFang SC;
	text-align: center;
	margin-bottom: 120rpx;
	.title {
		height: 60rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #3478f2;
		line-height: 54rpx;
		margin: 0 auto;
		letter-spacing: 1rpx;
	}
	view {
		letter-spacing: 1rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #696969;
		line-height: 38rpx;
		text-align: center;
		height: 44rpx;
		span {
			color: #fc1f1f;
		}
	}
}
.tip {
	width: 100vw;
	height: 64rpx;
	background: #f2f7ff;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 1rpx;
	.hand {
		margin-left: 12rpx;
		width: 44rpx;
		height: 48rpx;
	}
}
.bottom {
	padding-top: 24rpx;
	.first_line {
		width: 100vw;
		height: 2rpx;
		background: #f3f3f3;
	}
}
.btn {
	width: 640rpx;
	height: 92rpx;
	background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
	border-radius: 70rpx;
	text-align: center;
	line-height: 92rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	margin: 0 auto;
	margin-top: 60rpx;
}
</style>
